<template>
    <div class="v-side">
        <el-row class="tac">
            <el-col :span="24" class="numVa">
                <h5 class="title">
                    <router-link to="/">淘宝后台管理系统</router-link>
                </h5>
                <!-- router 开启路由模式点击后可以跳转 -->
                <el-menu router  class="el-menu-vertical-demo"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu v-for="(item , index) in menuList" :key="index" :index="index +''">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(subItem,idx) in item.children" :key="idx" :index="subItem.url">
                                {{ subItem.title }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
// vuex辅助函数
import { mapGetters } from 'vuex';
export default {
computed:{
    ...mapGetters([
    "menuList"
    ])
}
}
</script>

<style scoped>
.v-side .title{
    text-align: center;
}
</style>
